{% extends "home/common.html" %}
{% block content %}
<!-- //网站头部 -->
<div id="mr-mainbody" class="container mr-mainbody">
    <div class="row">
        <!-- 页面主体内容 -->
        <div id="mr-content" class="mr-content col-xs-12">
            <div id="mrshop" class="mrshop common-home">
                <div class="container_oc">
                    <div class="row">
                        <div class="col-sm-12">
                            <h1>我的购物车</h1>
                            <!-- 显示购物车中的商品 -->
                            <div class="table-responsive cart-info">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <td></td>
                                        <td class="text-center image">商品图片</td>
                                        <td class="text-left name">商品名称</td>
                                        <td class="text-left quantity">数量</td>
                                        <td class="text-right price">单价</td>
                                        <td class="text-right">总计</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <!-- 遍历购物车中的商品并显示 -->
                                    {% for item in cart %}
                                    <tr>
                                        <td>
                                            <input type="checkbox" onclick="chufajine()"
                                                   value="{{item.goods.current_price * item.number}}"
                                                   id="{{item.goods.id}}"
                                                   class="fuxuankuang" name="rights">
                                        </td>
                                        <td class="text-center image" width="20%">
                                            <a href="{{url_for('home.goods_detail',id=item.goods.id)}}">
                                                <img width="80px"
                                                     src="{{url_for('static',filename='images/goods/'+item.goods.picture)}}">
                                            </a>
                                        </td>
                                        <td class="text-left name">
                                            <a href="{{url_for('home.goods_detail',id=item.goods.id)}}">{{item.goods.name}}</a>
                                        </td>
                                        <td class="text-left quantity">{{item.number}}件</td>
                                        <td class="text-right price">{{item.goods.current_price}}元</td>
                                        <td class="text-right total" value="{{item.goods.current_price * item.number}}">
                                            {{item.goods.current_price * item.number}}元
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    <!-- //遍历购物车中的商品并显示 -->
                                    </tbody>
                                </table>
                            </div>
                            <!-- //显示购物车中的商品 -->
                            <!-- 显示总计金额  -->
                            <div class="row cart-total">
                                <div class="col-sm-4 col-sm-offset-8">
                                    <table class="table table-bordered">
                                        <tbody>
                                        <tr>
                                                <span>
                                                    <strong>总计:</strong>
                                                    <p id="total_price"></p>
                                                </span>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- //显示总计金额  -->
                        </div>
                    </div>
                    <!-- 填写物流信息 -->
                    <div class="row">
                        <div id="content_oc" class="col-sm-12">
                            <h1>物流信息</h1>
                            <a href="{{url_for('home.address_select')}}"
                               class="tigger btn btn-primary btn-primary">选择地址</a></td>
                            <!-- 填写物流信息的表单 -->
                            <form action="{{url_for('home.cart_order')}}" method="post" id="myform">
                                {% for item in address_data %}
                                <input type="text" id="goods_id" name="goods_id" style="display:none">
                                <div class="table-responsive cart-info">
                                    <table class="table table-bordered">
                                        <tbody>
                                        <tr>
                                            <td class="text-right" width="20%">收货人姓名：</td>
                                            <td class="text-left quantity">
                                                <div class="input-group btn-block" style="max-width: 400px;">
                                                    <input type="text" id="recevieName" name="recevie_name" size="10"
                                                           class="form-control" value="{{item.receive_name}}">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-right">收货人手机：</td>
                                            <td class="text-left quantity">
                                                <div class="input-group btn-block" style="max-width: 400px;">
                                                    <input type="text" id="tel" name="recevie_tel" size="10"
                                                           class="form-control" value="{{item.receive_tel}}">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-right">收货人地址：</td>
                                            <td class="text-left quantity">
                                                <div class="input-group btn-block" style="max-width: 400px;">
                                                    <input type="text" id="address" name="recevie_address" size="1"
                                                           class="form-control" value="{{item.receive_address}}">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-right">备注：</td>
                                            <td class="text-left quantity">
                                                <div class="input-group btn-block" style="max-width: 400px;">
                                                    <input type="text" name="remark" size="1" class="form-control"
                                                    value="{{item.remark}}">
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                {% endfor %}
                            </form>
                            <!-- //填写物流信息的表单 -->
                        </div>
                    </div>
                    <!-- //填写物流信息 -->
                    <br/>
                    <!-- 显示支付方式 -->
                    <div class="row">
                        <div id="content_oc" class="col-sm-12">
                            <h1>支付方式</h1>
                            <div class="table-responsive cart-info">
                                <table class="table table-bordered">
                                    <tbody>
                                    <tr>
                                        <td class="text-left"><img
                                                src="{{url_for('static',filename='home/images/zhifubao.png')}}"/></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <br/> <br/>
                            <div class="buttons">
                                <div class="pull-left">
                                    <a href="{{url_for('home.index')}}" class="btn btn-primary btn-default">继续购物</a>
                                </div>
                                <div class="pull-left">
                                    <a href="{{url_for('home.cart_clear')}}"
                                       class="btn btn-primary btn-default">清空购物车</a>
                                </div>
                                <div class="pull-right">
                                    <a href="javascript:zhifu();" class="tigger btn btn-primary btn-primary">结账</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- //显示支付方式 -->
                </div>
            </div>
        </div>
        <!-- //页面主体内容 -->
    </div>
</div>
<!-- 使用jBox插件实现一个支付对话框 -->
<script type="text/javascript" src="{{url_for('static',filename='home/js/jBox/jquery-1.4.2.min.js')}}"></script>
<script type="text/javascript" src="{{url_for('static',filename='home/js/jBox/jquery.jBox-2.3.min.js')}}"></script>
<link type="text/css" rel="stylesheet" href="{{url_for('static',filename='home/js/jBox/Skins2/Pink/jbox.css')}}"/>
<script type="text/javascript">
    // 获取总额
    // $(document).ready(function () {
    //     var myCheckbox = document.getElementById('mycheckbox');
    //     var total_price = 0
    //     $('.total').each(function () {
    //         if (myCheckbox.checked) {
    //             total_price += parseFloat($(this).attr('value'))
    //         }
    //         // total_price += parseFloat($(this).attr('value'))
    //     })
    //     $('#total_price').text(total_price + "元")
    // });

    function zhifu() {
        //验证收货人姓名
        if ($('#recevieName').val() === "") {
            alert('收货人姓名不能为空！');
            return;
        }
        //验证收货人手机
        if ($('#tel').val() === "") {
            alert('收货人手机不能为空！');
            return;
        }
        //验证手机号是否合法
        if (isNaN($('#tel').val())) {
            alert("手机号请输入数字");
            return;
        }
        //验证收货人地址
        if ($('#address').val() === "") {
            alert('收货人地址不能为空！');
            return;
        }
        //设置对话框中要显示的内容
        var html = '<div class="popup_cont">'
            + '<div style="width: 256px; height: 250px; text-align: center; margin:70px" >'
            + '<image src="/static/home/images/qr.png" width="256" height="256" />'
            + '<p style="color:#ff0000;padding-tope:30px">该页面仅为测试页面，并未实现支付功能</p></div>'
            + '</div>';
        var content = {
            state1: {
                content: html,
                buttons: {
                    '取消': 0,
                    '支付': 1
                },
                buttonsFocus: 0,
                submit: function (v, h, f) {
                    if (v == 0) {//取消按钮的响应事件
                        return true; //关闭窗口
                    }
                    if (v == 1) {//支付按钮的响应事件
                        //goods_id
                        var id = document.getElementsByName('rights');
                        var value = new Array();
                        for (var i = 0; i < id.length; i++) {
                            if (id[i].checked) {
                                value.push(id[i].id);
                            }
                        }
                        console.log(value.toString())
                        $("#goods_id").val(value.toString());

                        document.getElementById('myform').submit();//提交表单
                        //只提交选中的表单

                        return true;
                    }
                    return false;
                }
            }
        };
        $.jBox.open(content, '支付', 400, 450);//打开支付窗口
    }

    function chufajine() {
        var global_total_price = 0;
        var id = document.getElementsByName('rights');
        var value = new Array();
        for (var i = 0; i < id.length; i++) {
            if (id[i].checked) {
                value.push(id[i].value);
                global_total_price += parseFloat(id[i].value);
            }
        }
        $('#total_price').text(global_total_price + "元")
    }
</script>
<!-- // 使用jBox插件实现一个支付对话框 -->

{% endblock %}
